import Heand from "../component/heand";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import axios from 'axios';
import { isLogined } from "./auth";
import { Modal, Input } from 'antd';
import { UserOutlined } from '@ant-design/icons';

export default function Login() {
  // const [messageApi, contextHolder] = message.useMessage();
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [gly, setLoggedIn] = useState('');

  const [visible, setVisible] = useState(false);
  const [visiblepassword, setVisiblepassword] = useState(false);
  // const handleButtonClick = () => {
  //   setVisible(true);
  // };

  const handleModalClose = () => {
    setVisible(false);
  };
  const handlepassword = () => {
    setVisiblepassword(false);
  };

  const navigate = useNavigate()
  const goBack = () => {
    navigate('/')
  }

  useEffect(() => {
    if (isLogined() === true) {
      navigate(-1)
      console.log('财务室')
    }
  })
  const handleLogin = () => {
    // 存储用户名和密码到localStorage
    // localStorage.setItem('username', username);
    // localStorage.setItem('password', password);
    const data = {
      username,
      password
    };
    // console.log(data)

    axios.get(`https://r5ctn9z9.lc-cn-n1-shared.com/1.1/classes/people?where={"username":"${username}"}`, {
      headers: {

        " X-LC-Id": "r5CTN9z96pCW8mI8fx9YxOmw-gzGzoHsz",
        "X-LC-Key": "8gSsl4Sz0ILMiQeMNMA8xQqg",
        'Content-Type': 'application/json'
      },
    })
      .then((response) => {
        // 登录成功
        const users = response.data.results;
        //  gly=response.data.results[0].gly;
        // console.log(gly)
        if (users.length > 0) {
          const user = users[0];
          if (user.password === password) {
            console.log("用户名和密码验证通过");
            // 处理验证成功的逻辑
            sessionStorage.setItem('username', username);
            sessionStorage.setItem('password', password);
            setLoggedIn(response.data.results[0].gly)

            setTimeout(() => {
              goBack()
            }, 500);

          } else {
            console.log("密码不正确");
            // 处理密码不正确的逻辑
            setVisible(true);

          }

        } else {
          console.log("用户名不存在");
          // 处理用户名不存在的逻辑
          setVisiblepassword(true);
        }

      })
      .catch(error => {
        // 登录失败
        console.error(error);
        console.log("登录失败！")
        setUsername('');
        setPassword('');

      });


    // 或者存储用户名和密码到sessionStorage


    // 清空输入框
    setUsername('');
    setPassword('');

  };


  return (
    <div >
      <Heand gly={gly} />
      <div className="logindiv">
        <div className="lg">
          <div className="logininput" >
            <div className="hygl">用户登陆</div>

            <div className="lgus">
              <span >用户名</span>

              <Input className="loginusername" placeholder="Username" type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
            </div>

            <div className="lgps">
              <span>密码</span>

              <Input.Password className="loginpassword" placeholder="Password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
            </div>

            <div className="lgbt">
              <button onClick={handleLogin}>登录</button>
            </div>

            <Modal
              title="警告"
              open={visible}
              onOk={handleModalClose}
              onCancel={handleModalClose}
            >
              <p>密码输入错误！请重新输入</p>
            </Modal>
            <Modal
              title="警告"
              open={visiblepassword}
              onOk={handlepassword}
              onCancel={handlepassword}
            >
              <p>用户名不存在，请注册</p>
            </Modal>
          </div>
        </div>

      </div>


    </div>
  );
}